<script type="text/javascript"><!--//--><![CDATA[//><!--

    var grid_reload = function(){
        $('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
    };

    $(document).ready(function() {

        // Setup Datagrid
        $('#datagrid').datagrid({  
            url:gs_path+'/'+controller+'/getdata', 
            queryParams: $('#fm_search').serializeObject(),
            height:340,
            pagination:true,
            columns:[[
                { field : 'ck', checkbox:true, width: 40, align: 'center' },
                { field : 'id_customer', title : 'ID Client', width : 130, sortable:true },
                { field : 'kode_customer', title : 'Kode Client', width : 130, sortable:true },
                { field : 'nama', title : 'Nama Client', width : 200, sortable:true },
                { field : 'no_id', title : 'No KTP', width : 130, sortable:true },
                { field : 'jabatan', title : 'Jabatan', width : 250, sortable:true },
                { field : 'nama_perusahaan', title : 'Nama Perusahaan', width : 250, sortable:true },
                { field : 'alamat', title : 'Alamat', width : 250, sortable:true }
            ]]
        });     
        
        // Setup Form
        $('#form_master').setupForm([
            //{ name: 'id_customer', type: 'text', size: 'short', maxlength: 15, noempty:true },      
            { name: 'kode_customer', type: 'text', size: 'short', maxlength: 15, noempty:true },
            { name: 'no_customer', type: 'text', size: 'short', maxlength: 15 },
            { name: 'nama', type: 'text', size: 'long', maxlength: 200, noempty:true },
            { name: 'no_id', type: 'text', size: 'medium', maxlength: 40, noempty:true },           
            { name: 'jabatan', type: 'text', size: 'medium', maxlength: 40 },
            { name: 'nama_perusahaan', type: 'text', size: 'long', maxlength: 50 },
            { name: 'alamat', type: 'text', size: 'long', maxlength: 200, noempty:true },
            { name: 'kota', type: 'text', size: 'medium', maxlength: 100, noempty:true },
            { name: 'kode_pos', type: 'text', size: 'medium', maxlength: 30 },
            { name: 'no_telp', type: 'text', size: 'medium', maxlength: 30 },
            { name: 'no_hp2', type: 'text', size: 'medium', maxlength: 30 },
            { name: 'no_hp', type: 'text', size: 'medium', maxlength: 30 },
            { name: 'no_fax', type: 'text', size: 'medium', maxlength: 30 },
            { name: 'email', type: 'text', size: 'medium', maxlength: 100 },
            { name: 'status', type: 'text', size: 'medium', maxlength: 40, noempty:true },
            { name: 'tgl_survey', type: 'date', size: 'medium', maxlength: 40, noempty:true },
            { name: 'tgl_instalasi', type: 'date', size: 'medium', maxlength: 40, noempty:true },
            { name: 'tgl_trial', type: 'text', size: 'short', maxlength: 3, noempty:true },
            { name: 'tgl_berhenti_trial', type: 'date', size: 'medium', maxlength: 40, noempty:true },
            { name: 'bandwidth', type: 'text', size: 'medium', maxlength: 40 },
            { name: 'tgl_aktifasi', type: 'date', size: 'medium', maxlength: 40, noempty:true },
            { name: 'tgl_berakhir', type: 'date', size: 'medium', maxlength: 40, noempty:true }
        ]);
        

        $("#info-hide1").hide();
        $("#info-hide2").hide();
        $("#info-hide3").hide();
        $("#info-hide4").hide();
        $("#info-hide5").hide();
        $("#info-hide6").hide();
        $("#trial-hide").hide();

        
        // Create Dialog
        $('#dialog_container').dialog({
            closed:true,
            modal:true,
            title: '_',
            width:600,
            buttons:[{
                text:'Save',
                iconCls:'icon-save',
                handler:function(){
                    $('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ $('#dialog_container').dialog('close'); $('#datagrid').datagrid('reload'); $("#info-hide1").hide(); $("#info-hide2").hide(); $("#info-hide3").hide(); $("#info-hide4").hide(); $("#info-hide5").hide(); $("#trial-hide").hide();}});
                    //loadPage(gs_path + '/' + controller + '/index/');
                }
            },{
                text:'Close',
                iconCls:'icon-cancel',
                handler:function(){
                    $('#dialog_container').dialog('close');
                }
            }]
        });
        
       

    

        // Set Action Button
        var buttons = [ /*{ label: 'Add', icon: 'add', onclick: function() {
                            $('#nama,#no_id,#jabatan,#nama_perusahaan,#alamat,#kota,#kode_pos,#no_telp,#no_hp,#no_fax,#email,#tgl_trial,#kode_produk,#nama_inventori,#stock,#produk_harga,#banyak,#biaya_pendaftaran,#total_biaya').val('');
                            resetError();
                            $('#dialog_container').dialog('open');
                            $('#form_master').data('mode', 'create');
                            $('#form_master').parent().parent().parent().prev().find('.panel-title').html('New Client');
                            //$('#kode_customer').readonly(true);
                            $('#kode_customer, #no_customer, #nama, #no_id, #jabatan, #nama_perusahaan, #alamat, #kota, #kode_pos, #no_telp, #no_hp, #no_fax, #email,  #status, #tgl_survey, #tgl_instalasi, #jenis, #tgl_trial, #tgl_aktifasi, #tgl_due, #tgl_berakhir, #jenis, #bandwidth').val('');
                            $('#kode_customer').focus();
                            $('#id_customer').readonly(true);
                            $('#id_customer').setval('<?php echo $kode_customer_auto ; ?>');
                            $("#info-hide1").hide();
                            $("#info-hide2").hide();
                            $("#info-hide3").hide();
                            $("#info-hide4").hide();
                            $("#info-hide5").hide();
                            $("#info-hide6").hide();
                            $("#trial-hide").hide();

                            
                        } },*/
                        { label: 'Edit', icon: 'edit', onclick: function() {
                            var oSel=$('#datagrid').datagrid('getSelected'); 
                            console.log(oSel);

                            if(oSel==null){ alert('Please select row!'); }
                            else{ 
                                resetError();
                                $('#dialog_container').dialog('open'); 
                                $('#form_master').data('mode', 'edit');
                                $('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Client Tidak Berlangganan');
                                //$('#kode_customer').readonly();
                                $('#id_customer').setval(oSel['id_customer']); 
                                $('#id_customer').readonly(true);
                                jsonToForm(oSel); $('#nama').focus();
                                var kode_str = oSel['kode_customer'];
                                var kode_edit = kode_str.split('-');
                                $('#kode_customer').setval(kode_edit[0]);
                                $('#no_customer').setval(kode_edit[1]);
                                
                                var status_customer = oSel['status'];
                                $('#status').setval(status_customer);
                                 $("#status").change(function() {
                                     var str = "";
                                     $("#status option:selected").each(function() {
                                        str = $(this).text();
                                     });

                                     if(str == 'Berlangganan'){
                                        $("#info-hide1").hide();
                                        $("#info-hide2").hide();
                                        $("#info-hide3").hide();
                                        $("#info-hide4").hide();
                                        $("#info-hide5").hide();
                                        $("#info-hide6").hide();
                                        $("#trial-hide").hide();
                                        $('#tgl_survey, #tgl_instalasi, #tgl_trial, #tgl_berhenti_trial, #tgl_aktifasi, #tgl_due, #tgl_berakhir,').val('');
                                     }
                                     else if(str == 'Tidak Berlangganan'){
                                        $("#info-hide1").hide();
                                        $("#info-hide2").hide();
                                        $("#info-hide3").hide();
                                        $("#info-hide4").hide();
                                        $("#info-hide5").hide();
                                        $("#info-hide6").hide();
                                        $("#trial-hide").hide();
                                        $('#tgl_survey, #tgl_instalasi, #tgl_trial, #tgl_berhenti_trial, #tgl_aktifasi, #tgl_due, #tgl_berakhir,').val('');
                                     }else if(str == 'Trial'){
                                       $("#info-hide1").hide();
                                       $("#info-hide2").hide();
                                       $("#info-hide3").hide();
                                       $("#info-hide4").hide();
                                       $("#info-hide5").hide();
                                       $("#info-hide6").hide();
                                       $("#trial-hide").hide();
                                       $('#tgl_survey, #tgl_instalasi, #tgl_trial, #tgl_berhenti_trial, #tgl_aktifasi, #tgl_due, #tgl_berakhir,').val('');
                                     }
                                     
                                });

                            } 
                        } },
                        
                        {label: 'Delete', icon: 'delete', onclick: function() { 
                            var oSel = $('#datagrid').datagrid('getSelected'); 
                            if (oSel == null) { 
                                $.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
                            } else { 
                                deleteData(['id_customer']);
                            } 
                        }}];
        setAction(buttons);
        
        // $('#biaya_pendaftaran, #banyak').keyup(function(){
        //  total_produk = ($('#kode_produk')[0].value == "") ? 0 : (parseFloat($('#produk_harga')[0].value) * parseFloat($('#banyak')[0].value));
        //  biaya_pendaftaran = ($('#biaya_pendaftaran')[0].value == "") ? 0 :parseFloat($('#biaya_pendaftaran')[0].value);
        //  $('#total_biaya').val(total_produk + biaya_pendaftaran);
        // });

        $('#fm_search').focusFirst();
    });
//--><!]]></script>

<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" onsubmit="grid_reload(); return false;">
            <table class="tb_form" style="margin-bottom:0px">
            <tr>
                <td width="100">Keyword</td>
                <td><input type="text" id="keyword" name="keyword" class="textfield medium" />
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
                </td>
            </tr>
            </table>
        </form>
    </div>
</div>
<div id="datagrid" toolbar="#tb"></div>


<div id="dialog_container" style="padding:5px;width:600px;height:600px;">
    <form id="form_master">
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label" style="width:150px">ID Client</td>
        <td><input id="id_customer" name="id_customer" type="hidden" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Kode Client</td>
        <td><select id="kode_customer" name="kode_customer">
            <option value="CBS">CBS</option>
            <option value="CBG">CBG</option>
            <option value="DCT">DCT</option>
            </select> - <input id="no_customer"></td>
    </tr>
    <tr>
        <td class="label">Nama Client</td>
        <td><input id="nama" /></td>
    </tr>
    <tr>
        <td class="label">No. KTP</td>
        <td><input id="no_id" /></td>
    </tr>
    <tr>
        <td class="label">Jabatan</td>
        <td><input id="jabatan" /></td>
    </tr>     
    <tr>
        <td class="label">Nama Perusahaan</td>
        <td><input id="nama_perusahaan" /></td>
    </tr>         
    <tr>
        <td class="label">Alamat</td>
        <td><input id="alamat" /></td>
    </tr>
    <tr>
        <td class="label">Kota</td>
        <td><input id="kota" /></td>
    </tr>    
    <tr>
        <td class="label">Kode Pos</td>
        <td><input id="kode_pos" /></td>
    </tr>    
    <tr>
        <td class="label">Telp</td>
        <td><input id="no_telp" /></td>
    </tr>    
    <tr>
        <td class="label">Handphone (+62)</td>
        <td><input id="no_hp" /></td>
    </tr>
    <tr>
        <td class="label">No Kontak Lain (+62)</td>
        <td><input id="no_hp2" /></td>
    </tr>
    <tr>
        <td class="label">Fax</td>
        <td><input id="no_fax" /></td>
    </tr>         
    <tr>
        <td class="label">Email</td>
        <td><input id="email" /></td>
    </tr>
    <tr>
        <td class="label"><h3>INFORMASI PELANGGAN</h3></td>
        <td>&nbsp;</td>
    </tr>    
    <tr>
        <td class="label">Status Customer</td>
        <td><select id="status" name="status">
                <option value=""></option>
                <option value="Berlangganan">Berlangganan</option>
                <option value="Tidak Berlangganan">Tidak Berlangganan</option>
                <option value="Trial">Trial</option>
             </select></td>
    </tr>
    <tr id="info-hide1">
        <td class="label">Tanggal Survey</td>
        <td><input id="tgl_survey" /></td>
    </tr>
    <tr id="info-hide2">  
        <td class="label">Tanggal Instalasi</td>
        <td><input id="tgl_instalasi" /></td>
    </tr>                    
    <tr id="trial-hide">
        <td class="label">Lama Trial</td>
        <td><input id="tgl_trial" /> &nbsp; &nbsp; &nbsp; HARI</td>
    </tr>
    <tr id="info-hide4">
        <td class="label">Tanggal Aktifasi</td>
        <td><input id="tgl_aktifasi" /></td>
    </tr>
    <tr id="info-hide6">
        <td class="label">Tanggal Berhenti Trial</td>
        <td><input id="tgl_berhenti_trial" /></td>
    </tr>
    <tr id="info-hide5">
        <td class="label">Berhenti Berlangganan</td>
        <td><input id="tgl_berakhir" /></td>
    </tr>
   
    </table>
    </form>
</div>